<template>
    <view class="reset-password">
        <view class="title">重置密码</view>
        <view class="subtitle">重置/找回密码</view>
        <view class="input-area">
            <u-input v-model="phone" type="number" placeholder="请输入手机号" border="none" :customStyle="{ borderRadius: '40rpx' }">
                <template slot="prefix">
                    <view class="solt-left">
                        <u-icon name="phone" size="20" color="#909399"></u-icon>
                        <text @click="show = true" class="country">+86</text>
                        <u-icon name="arrow-down" size="16" color="#333333FF"></u-icon>
                    </view>
                </template>
            </u-input>
        </view>
        <u-button @click="nextHandle" text="下一步" :disabled="!phone.length" color="#4DACB1FF" style="width: 90%; margin-top: 60rpx; border-radius: 50rpx;"></u-button>
        <u-action-sheet @close="close" cancelText="取消" :actions="list" :show="show" :closeOnClickOverlay="true" :closeOnClickAction="true"></u-action-sheet>
    </view>
</template>

<script>
export default {
    data() {
        return {
            phone:'',
			list: [
				{
					name:'86'
				}
			],
			show: false
        }
    },
    methods: {
        nextHandle() {
            console.log(uni.$u.test.mobile(this.phone))
            let res = uni.$u.test.mobile(this.phone)
            if(res) {
                uni.navigateTo({
                    url: '/pages/login/vCode?phone=' + this.phone
                });
            } else {
                uni.$u.toast('手机号码格式不正确')
            }
        },
        close() {
            this.show = false
        }
    }
}
</script>

<style lang="scss" scoped>
    .reset-password {
        display: flex;
        flex-direction: column;
        align-items: center;
        .title {    
            padding-top: 60rpx;
            font-size: 64rpx;
            font-weight: 500;
            color: rgba(12, 16, 25, 1);
        }
        .subtitle {
            margin-top: 20rpx;
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(103, 117, 133, 1);
        }
        .input-area {
            width: 80%;
            margin: 0 auto;
            margin-top: 60rpx;
            padding: 20rpx 40rpx;
            background: #FFFFFFFF;
            border-radius: 100rpx;
            .solt-left {
                display: flex;
                align-items: center;
                .country {
                    margin-left: 20rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(12, 16, 25, 1);
                    margin-right: 12rpx;
                }
            }
        }
    }
</style>